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Делаем доступной библиотеку ~ 
компонентов - на примере VKUI 


Евгения Полозова, ВКонтакте 


ЗА. 


Ш == 
ЕС Бо) 2022 


Евгения Полозова 


Фронтенд-разработчица 
ВКонтакте, Соге-команда УКЦ 


Доступность — это 
сложно? 


accessibility 


Надо всего лишь... 


верстать семантически 
не забывать про alt для <img/> 


не выключать подсветку 
интерактивных элементов 


...И так далее 


Ке у 


Accessibility Unity 


Школа цифровой доступности 


Где научиться? 


Accessibility Unity — Школа 
цифровой доступности 
Валерии Курмак 


Остаются ещё 20% <> 


О чем расскажу · Зачем доступность библиотеке 
компонентов (дизаин-системе)2 


• Критерии доступности 


• Доступность в VKUI 


Нельзя простотак Th 


* особенно если у вас 
библиотека компонентов 
(дизаин-система) 
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«Дураки и дороги» 


ІШІ 


— а „ 
Мн u 


ra > ЕС 


ally улучшает DX 


• Меньше заботы о доступности 
дла разработчиков 


• Ниже порог входа 
• Быстрее разработка 


• Больше шансов, что УКШ 
выберут (разработчики) 


· АПУ _ НЕТТАКИХ 


— 


3 7 | 
ә Сн 


ally улучшает UX 


• Проще интерфейс 
• Понятнее поведение 


• Больше пользователей может 
выполнять свои задачи 


• Больше шансов, что VKUI 
выберут (пользователи) 


Законы РФ 


• 181-ФЗ «О социальной защите 
инвалидов в Российской 
Федерации» 


273-ФЗ «06 образовании 
в Российской Федерации» 


ГОСТ P 51671-2020 
ГОСТ Р 528 /2-2019 


change.org = Кейс Сбербанка Онлаин 


Подробнее о петиции Новости этой кампании 


|4 Победа 


Петиция на сһапде.ога -> 
обрашение в прокуратуру 


1 ОТВЕТ 


Сделайте Сбербанк онлайн 
доступным для слепых 


Доступность 
сервисов УК 


9300 


мини-приложений ҮК Mini Apps 


Главная Задания Бонусы События 


@ =. 


Другое Дело Пора 
— про что Прокачай включить 
это? себя уведомления 


Может быть интересно 


А Р” 
#Безбумаги DOBRO.RU 
Создай полезную вещь из Экспресс-курс по 
макулатуры зооволонтёрству 


+635 © +195 2) 


Подборка 
топовых 
заданий 


DOBRO.RU 
Экспресс- 
зковолонт 


+195 2) 


Другое дело 


Мини-приложение на VKUI 


22 


Мои питомцы 


Друзья 


єз Лаю на дверь 


Полезные истории 


Справочник 


Сладко 
мурчу 


Добрые дела 


е9 Прячусь 
52 внорке 


99 


Сохраните 2 
Конвертер Поиск пне Опасный Истории о 
возраста питомца сезон питомцах 
|| питомца 
Питомцы 


Джонси 
Девон-рекс · 1 год 


Латте 
Девон-рекс · 11 месацев 


= 


Добавить питомца 


Питомцы 
ВКонтакте 


Мини-приложение на VKUI 
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День рождения Кешбэк Купоны 
— иии 
Г) е 
+ 
#ВКонтакте1б 
Добрый День Рождения 
Собираем на благотворительность М И H И 7 П р ИЛ ожен ие Н а VKU | 


и дарим подарки: выполняйте задания 
и раскрашивайте логотип, чтобы 
выиграть суперприз и помочь фонду 


Раскрасить логотип 


Выполнять задания 


День рождения для друзей 


Вместе помогаем благотворительному фонду «Лучшие друзья» 
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Задания 


< Приватность 


3 Моа страница 


Кто видит основную информацию моей 
страницы 
8 Все друзья 


Кто видит мои сохранённые фотографии 
В Только я 


Кто видит список моих групп 
8 Только я 


Кто ВИДИТ СПИСОК МОИХ аудиозаписей 
а Только я 


Кто видит список моих подарков 
В Только я 


Кто видит моих скрытых друзей 
В Только я 


Кто может отправлять мне вопросы 
а Друзья и друзья друзей 


Настройки приватности 
в нативных приложениях 


Внутреннее мини-приложение 
на VKUI 


Показывается в webview 
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Лина Московкина 


чикиряу 


Вика Новикова 
Каким вижу этот мир – 


Санкт-Петербур 


ан Бранивщук 
тербург ВКонта з 


159 друзей б RO a дей 


а lete ге 


С) Клипы (о) Видео (© Сюя 


зд. OOA || 


= Фото (© Сюжеты о 


О работе с ожиданиями 
14 авг 2022 · 9 мин чтения 


ij т. тоже реализован на VKUI 
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ID 


Главнаа 


> 8 


Личные данные 


Безопасность и вход 


МК Рау: карты и платежи 


Подписки 


CHORO, 


Сервисы и сайты 


оо 
оо 


Конфиденциальность Условия 


Евгения Полозова Как мы зашу 
фу BA ваши данны! 


Аккаунт надежно зашишен 
Никому не передавайте свой пароль 


Как усилить защиту своего аккаунта VK ID? 

Почему важно указывать настоящие данные в профиле? 
Как сменить номер телефона? 

Какие сервисы имеют доступ к данным вашего аккаунта? 
Как изменить пароль для аккаунта МК 102 


В каких приложениях вы авторизованы с VK ID? 


VK ID 


Фронтенд на VKUI 
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Доступность — это 
must have 


ципы 
пности 


Четыре принципа • Perceivable — Информация и 
POUR тексты одинаково легко 


воспринимаются всеми 


• Operable — Управлять 
приложением может любой 


• Understandable — Дизайн и контент 
понятны для всех 


• Robust — Контент надёжно 
отображается на всех устройствах 
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Как применить 
POUR к библиотеке 
компонентов? 


• Perceivable — © 

e Operable — 

• Understandable — 
• Robust — А(УУ)/ 
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Tabs 


Доступность 


Для корректной работы скринридеров 
необходимо вручную передавать некоторые 
параметры: 


е В компонент вкладки (TabsItem) нужно 
передать id и aria-controls, указывающий 
на id области с его KOHTEHTOM. 


e В область контента необходимо передать 
параметры id, tabIndex = 0 и aria- 
labelledby , ссылающийся Ha компонент таба 


Не РООВ единым 


Разработчикам нужна 
документация 
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VKUI 
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• библиотека React- 
компонентов и дизаин- 
система 


• open source 
. адаптивная 
e мультиплатформенная 


. доступная 62 
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Доступность 
появилась в VKUI 
только в \4.9 


@vkontakte/vkui 


0.7.0 • 


08 Јип 2021 


э eugpoloz 


© v4.9.0 


© 16f4e47 


Compare 


w 


Public • 


Published 5 years ago 


v4.9.0 


Доступность 
• Постепенно внедряем базовую доступность: 


подходящие семантически теги, проставили 
необходимы. (#1611) 


Исправления 


e Cell : поправлен баг с иконками для selecti 


е PopoutRoot : исправлен бреикпоинт переклю 


> Assets 2 


© 
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Критерии Ш 
доступности 


г весь контент доступен со 
скринридера 

" приложение полностью 
доступно с клавиатуры 
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Что, если взять готовое решение? 


Сэкономим время! 


Ноте » Accessible Ul Component Libraries Roundup 
WEB ACCESSIBILITY 


Accessible Ul Component Libraries Roundup 


$; Authored Ву: Raghavendra Satish Peri • Last Updated : January 11, 2022 • Web Accessibility 
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Зксперимент: 
react-arıa 


react-arla 


Ha React © 


поддерживаетса крупнои 
компанией 


не навязывает свой 
дизайн 


нормализует поведение 
в разных браузерах 
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ble UI primitives for your design sys 


Минусы react-aria 


• редко выходят новые 
версии, медленно фиксятся 
баги 


• хромает производительность 
° раздувает бандл 


e плохо поддерживает 
мобильные браузеры (Safari 
13+) 
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Я сделаю это сам 


Outline при навигации с 
клавиатуры 


4 с 


С) уки: PRs 


С) уки: Issues 
Qui 


О VKUI 


Быстрый старт 


ОСНОВА 


N а vkcom.github.io 


С) уки: Board С) [#2191] именова... С) [#1586] Убрать d... <> JIRA: U 
v4.29.0 Github Релизы 
У Github 
ModalPageHeader 


Шапка в модальных страницах. У 
как children. 


Требования по расположению 


Режимы подключения 


Адаптивность 


На Android слева может быть 


На iOS справа должна быть Kt 


PanelHeaderSubmit. 


Платформы и темы 


Структура экранов 


КОМПОНЕНТЫ 


А Поиск 


Layout 


Popouts 


Poppers 


Modals 


AAnRAAIDAAFT 


Если произойдёт навигация в! 


Также Ha Android могут быть как! 


import 4 ModalPageHeader, AN 


const platform = usePlatform 


return ( 
<ModalPageHeader 
left={ 
<Fragment> 
{(platform === ANDRO 
45 arButton 
ancel > 
</PanelHeaderButto 


mE 


Трустори: JS ув CSS 07 


Focus trap B 
модальных окнах 


Модальные окна 


Открыть модальную страницу 


| 


Открыть полноэкранную модальную 
страницу 


Открыть модальную страницу с 
динамической высотой 


Открыть модальные карточки 
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prefers-reduced-motion: no-preference 
class$= >. j 
top: 4px; 
left: 4px; 


right: 4px; 

bottom: 4px; 

animation: vkui-animation-focus-visible 0.155 
animation-delay: 0.01п5; 

will-change: 


Анимации под prefers- 
reduced-motion 


Включаются только по 
флагу no-preference 
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Компонент 
<VisuallyHiddenInput/> 
Визуально скрывает инпут, 


оставляя его доступным 
для ассистивных технологий 


a a a FESTPrOpS 


onChange=ihandleChange 


type= 
vku1C Lass= 


<VisuallyHiddenInput/> внутри <Checkbox/> 
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if (15 РЕМ 66 !restProps[ 1 66 !arialabel) 4 
магп ( 


Пример подсказки, которая всплывет в консоли для недоступного <WriteBarlcon/> 
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Трустори: aria-label 52 


Qui 


O VKUI 


Быстрый старт 


ОСНОВА 


Режимы подключения 


Адаптивность 


Платформы и темы 


Структура экранов 


КОМПОНЕНТЫ 


О, Поиск 


Layout 


Popouts 


v4.29.0 Github Релизы 


About 


VKUI — это библиотека адаптивных React- 
компонентов. С ee помошњ 
создавать веб-приложения 
экосистеме ВКонтакте. 


киі 


Библиотека основана на д O VKUI 


ВКонтакте и реализует ев 


различных платформ. Быстрый старт 


Начните разрабатывать уж 
инструкцию по быстрому C 


Преимушества VKUI Режимы подключения 


• Адаптивность. Библиоте 

экраны разного размера, Адаптивность 
доступным на смартфонах, 

компьютерах. Платформы и темы 


• Мультиплатформенност 
практически неотличимы о 
внутри которых они откры 


Структура экранов 


"мимикрировать" под наш 


Q Поиск 


Layout 


Popouts 


Темнаа тема 2 


v4.29.0 Github Релизы 


About 


VKUI — это библиотека адаптивных React- 
компонентов. С ее помощью вы сможете 
создавать веб-приложения и УК Mini Apps в 
экосистеме ВКонтакте. 


Библиотека основана на дизайн-системе 
ВКонтакте и реализует её интерфейсы для 
различных платформ. 


Начните разрабатывать уже сейчас, изучив 
инструкцию по быстрому старту. 


Преимущества УКЦ 


• Адаптивность. Библиотека подстраивается под 
экраны разного размера, делая интерфейс 
доступным на смартфонах, планшетах и 
компьютерах. 


е Мультиплатформенность. Интерфейсы на УКЦ 
практически неотличимы от дизайна платформ, 
внутри которых они открыты. Библиотека умеет 
"мимикрировать" под наши 105 и Android 


кпиенты поп пизайн vk com и гам com 
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Будушее 
доступности в VKUI 


Что сделаем 2 


Дадим возможность создавать 
иерархию заголовков 


Будем скрывать остальное 
приложение от ассистивных 
технологий при открытых модалках 


Добавим больше документации 


Улучшим семантику (еще чуть-чуть) 
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Трустори: @vkontakte/icons © 


Вы ВОДЫ e Доступность для библиотеки компонентов 
(дизайн-системы) — это must have 


• Принципы доступности библиотеки 
компонентов и обычного сайта — разные 


• Закладывайте доступность сразу 


• Ищите людей, которым это интересно 
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Или переходите на 
VKUI | 


7 


Спасибо за внимание! 
Проголосовать за 
доклад можно тут &- 


PÈL н 
Frontend 
=: ЗА. | 
p ~ 


